<template>
  <!-- videoConfigure 视频配置 -->
  <div class="energy-flow">
    <div class="con">
      <div class="tree-left">
        <div class="search">
          <el-input
            placeholder="输入关键字进行过滤节点"
            v-model="filterText"
          ></el-input>
        </div>
        <div class="btns">
          <span v-show="false">{{ unitId }}</span>
          <el-button type="primary" @click="popupFn('add')">新增</el-button>
          <el-button type="primary" @click="popupFn('eait')">修改</el-button>
          <el-button type="danger" @click="delFun">删除</el-button>
        </div>
        <div class="scroll" style="width: 100%; height: calc(100% - 90px)">
          <el-scrollbar style="height: 98%; width: 100%">
            <el-tree
              :data="leftData"
              :props="defaultProps1"
              ref="leftTree"
              @node-click="leftTreeClick"
              :highlight-current="true"
              :expand-on-click-node="true"
              node-key="id"
              :default-expanded-keys="defaultExpanded"
              :current-node-key="defaultDevice"
            >
              <template #default="{ node }">
                <div class="custom-tree-node">
                  <div style="display: flex; align-items: center">
                    <img
                      src="../../../public/static/image/elTree/1.9.png"
                      style="margin-right: 5px"
                      v-show="node.data.tag === 1 || node.data.tag === 2"
                    />
                    <img
                      src="../../../public/static/image/elTree/video.png"
                      style="margin-right: 5px"
                      v-show="node.data.tag === 4"
                    />
                    <img
                      src="../../../public/static/image/elTree/group.png"
                      style="margin-right: 5px"
                      v-show="node.data.tag === 3"
                    />
                    <span style="padding-left: 5px">{{ node.data.name }}</span>
                  </div>
                </div>
              </template>
            </el-tree>
          </el-scrollbar>
        </div>
      </div>
      <div class="content">
        <div class="Files-top">
          <div class="ic-left content-title">
            <span
              >预置点<span
                style="color: #000; font-size: 16px"
                v-show="nodeItem.name"
                >/ {{ nodeItem.name }}</span
              ></span
            >
          </div>
          <div class="btns">
            <el-button
              @click="exportExcel"
              v-if="currentRow.id && checkedNodes.length"
              type="primary"
              class="last-el-button"
              >提交</el-button
            >
          </div>
        </div>
        <div style="display: flex; height: calc(100% - 32px)">
          <div class="mytable">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              height="100%"
              border
              @current-change="handleCurrentChange"
              highlight-current-row
            >
              <el-table-column label="点号" width="180">
                <template #default="{ row }">{{ row.presetNumber }}</template>
              </el-table-column>
              <el-table-column prop="presetName" label="名称">
              </el-table-column>
              <el-table-column label="默认" width="90">
                <template #default="{ row }">
                  <el-checkbox
                    @change="isDefault(row)"
                    v-model="row.isDefault"
                    :true-label="1"
                    :false-label="0"
                  ></el-checkbox
                ></template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="tree-right">
        <div class="search">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
          ></el-input>
        </div>
        <!-- <div class="right-tree" style="padding-left:10px"> -->
        <div class="scroll" style="width: 100%; height: calc(100% - 50px)">
          <el-scrollbar style="height: 100%; width: 100%">
            <el-tree
              :data="rightData"
              show-checkbox
              node-key="numNo"
              :props="defaultProps"
              @check="currentChecked"
              ref="tree"
            >
              <template #default="{ node }">
                <div class="custom-tree-node">
                  <div style="display: flex; align-items: center">
                    <img
                      src="../../../public/static/image/elTree/1.9.png"
                      style="margin-right: 5px"
                      v-show="node.data.Content.Category == 'Organization'"
                    />
                    <img
                      src="../../../public/static/image/elTree/2.1.png"
                      style="margin-right: 5px"
                      v-show="node.data.Content.Category == 'Device'"
                    />
                    <span style="padding-left: 5px">{{
                      node.data.Content.Name
                    }}</span>
                  </div>
                </div>
              </template>
            </el-tree>
          </el-scrollbar>
        </div>
        <!-- </div> -->
      </div>
    </div>

    <!-- 新增修改 -->
    <el-dialog
      draggable
      :title="dialogStatus + ' (' + unitItem.name + ' )'"
      :close-on-click-modal="false"
      v-model="dialogVisible"
      center
      label-position="right"
      width="800px"
    >
      <!-- v-show="dialogStatus == '新增'"  -->
      <div style="margin-top: 12px">
        <el-button
          type="danger"
          @click="flagFn"
          v-show="tag == 3 && dialogStatus == '新增'"
          >切换</el-button
        >
        <el-form
          :model="temp"
          v-if="flag"
          :rules="rules"
          ref="temp"
          label-width="120px"
          class="demo-temp"
        >
          <el-form-item label="分组名称:" prop="categoryName">
            <el-input v-model="temp.categoryName"></el-input>
          </el-form-item>
          <el-form-item label="分组编号:" v-show="dialogStatus != '新增'">
            <el-input v-model="temp.categoryCode" disabled></el-input>
          </el-form-item>
        </el-form>
        <el-form
          :model="temp2"
          v-if="!flag"
          :rules="rules"
          ref="temp"
          label-width="120px"
          class="demo-temp"
          :inline="true"
        >
          <el-form-item
            v-if="dialogStatus == '修改'"
            label="视频编号:"
            prop="camera_code"
          >
            <el-input disabled v-model="temp2.camera_code"></el-input>
          </el-form-item>
          <el-form-item label="视频名称:" prop="camera_name">
            <el-input v-model="temp2.camera_name"></el-input>
          </el-form-item>
          <el-form-item label="品牌:" prop="encoder_type">
            <el-select
              v-model="temp2.encoder_type"
              placeholder="请选择"
              @change="play_portFn"
              style="width: 120px"
            >
              <el-option label="海康威视" :value="0"> </el-option>
              <el-option label="大华视频" :value="2"> </el-option>
              <el-option label="汉升" :value="3"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="视频服务器:">
            <span style="display: block; width: 204px">
              <el-checkbox
                v-model="temp2.cameraService"
                :true-label="1"
                :false-label="0"
                >视频服务器</el-checkbox
              >
            </span>
          </el-form-item>

          <el-form-item label="通道号:" prop="channel_id">
            <el-input
              v-model="temp2.channel_id"
              :disabled="!temp2.cameraService"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="码流类型:"
            v-if="temp2.encoder_type == 0"
            prop="streamType"
          >
            <el-select
              v-model="temp2.streamType"
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option label="主码流" :value="0"> </el-option>
              <el-option label="子码流" :value="1"> </el-option>
              <el-option label="码流3" :value="2"> </el-option>
              <el-option label="码流4" :value="3"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="云控制:">
            <span style="display: block; width: 204px">
              <el-checkbox
                v-model="temp2.servicecontrol"
                @change="servicecontrolFn"
                :true-label="1"
                :false-label="0"
                >云台控制</el-checkbox
              >
            </span>
          </el-form-item>
          <el-form-item label="预置点:" prop="preset_count">
            <el-input
              v-model="temp2.preset_count"
              :disabled="!temp2.servicecontrol"
              type="number"
              placeholder="0-255个 "
            ></el-input>
          </el-form-item>
          <el-form-item label="ip地址:">
            <el-input v-model="temp2.remote_ip"></el-input>
          </el-form-item>
          <el-form-item label="直播地址:">
            <el-input v-model="temp2.liveip"></el-input>
          </el-form-item>
          <el-form-item label="端口:" prop="remote_port">
            <el-input v-model="temp2.remote_port"></el-input>
          </el-form-item>
          <el-form-item label="登陆名:" prop="remote_user">
            <el-input v-model="temp2.remote_user"></el-input>
          </el-form-item>
          <el-form-item label="登陆密码:" prop="remote_pwd">
            <el-input v-model="temp2.remote_pwd" show-password></el-input>
          </el-form-item>
          <el-form-item label="rtsp路径:">
            <el-input style="width: 240px" v-model="temp2.address"></el-input>
          </el-form-item>
        
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="determine_Fn(dialogStatus)"
            >确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getReadDeviceTree } from "../../api/abbNewApi";
import request from "../../api/htttp2.js";
// import elRadioTree from '@/components/module/tree/elRadioTree.vue'
export default {
  data() {
    return {
      temp2: {
        encoder_type: 0,
        preset_count: 1,
        channel_id: 1,
        remote_port: 8000,
        remote_user: "admin",
        remote_pwd: "admin",
        streamType: 0,
        cameraService: 0,
        servicecontrol: 0,
      },
      flag: true,
      currentRow: {},
      typeVal: "",
      typeoptions: [
        {
          value: "能流分析",
          label: "能流分析",
        },
        {
          value: "变损分析",
          label: "变损分析",
        },
        {
          value: "线损分析",
          label: "线损分析",
        },
      ],
      dialogStatus: "新增", //弹窗类型
      radio: "能流分析", //单选框

      leftData: [], //左边树形结构数据
      rightData: [], //右边树形结构树形
      defaultProps1: {
        children: "children",
        label: "name",
      },
      defaultProps: {
        children: "ChildDatas",
        label: "Content.Name",
      },
      filterText: "",
      tableData: [],
      multipleSelection: [],
      rules: {
        categoryName: [
          { required: true, message: "请输入分组名称", trigger: "change" },
        ],
        streamType: [
          { required: true, message: "请选择主流编码", trigger: "change" },
        ],
        servicecontrol: [
          { required: true, message: "请输入云控制", trigger: "blur" },
        ],
        cameraService: [
          { required: true, message: "请输入视频服务器", trigger: "blur" },
        ],
        camera_code: [
          { required: true, message: "请输入视频编号", trigger: "blur" },
        ],
        camera_name: [
          { required: true, message: "请输入视频名称", trigger: "blur" },
        ],
        channel_id: [
          { required: true, message: "请输入通道号", trigger: "blur" },
        ],
        encoder_type: [
          { required: true, message: "请输入品牌", trigger: "blur" },
        ],
        liveip: [
          { required: true, message: "请输入直播地址", trigger: "blur" },
        ],
        play_port: [
          { required: true, message: "请输入播放端口", trigger: "change" },
        ],
        preset_count: [
          { required: true, message: "请输入预置点", trigger: "blur" },
        ],

        remote_ip: [
          { required: true, message: "请输入ip地址", trigger: "blur" },
        ],
        remote_port: [
          { required: true, message: "请输入端口", trigger: "blur" },
        ],
        remote_pwd: [
          { required: true, message: "请输入登陆密码", trigger: "blur" },
        ],
        remote_user: [
          { required: true, message: "请输入登陆名", trigger: "blur" },
        ],
      },
      temp: {},
      dialogVisible: false,
      unitItem: [],
      tag: 1, //判断点击的是单位/能流图/节点
      nodeItem: [], //节点
      checkedNodes: [],
      halfCheckedNodes: null,
      nowNode: "",
      defaultExpanded: [],
      defaultDevice: "",
      leftDataCopy: [],
      oldName: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    unitId() {
      this.findUnitInfoFun();
    },
  },
  computed: {
    unitId() {
      return 1231;
      // return this.$store.unitStore.state.nowUnit
    },
  },
  mounted() {
    this.findUnitInfoFun();
    // this.getCameraListfn()
    var num = 0;
    getReadDeviceTree().then((res) => {
      var recursiveFunction = function () {
        const getStr = function (list) {
          list.forEach(function (row) {
            if (row.ChildDatas.length != 0) {
              row.numNo = num++;
              getStr(row.ChildDatas);
            } else {
              row.numNo = num++;
              row["disabled"] = false;
            }
          });
        };
        getStr(res.data);
      };
      recursiveFunction();
      this.rightData = res.data;
    });
  },
  beforeDestroy() {
    this.nodeItem = [];
  },
  methods: {
    flagFn() {
      this.flag = !this.flag;
      this.$nextTick(() => {
        this.$refs["temp"].clearValidate();
      });
    },
    // 品牌change
    play_portFn(v) {
      if (v == 1) {
        this.temp2.channel_id = "1";
        this.temp2.remote_port = "8000";
        // this.$set(this.temp2,'channel_id','1');
        // this.$set(this.temp2,'remote_port','8000');
      } else {
        this.temp2.channel_id = "0";
        this.temp2.remote_port = "37777";
        // this.$set(this.temp2,'channel_id','0');
        // this.$set(this.temp2,'remote_port','37777');
      }
    },
    servicecontrolFn(v) {
      if (v) {
        this.temp2.preset_count = "255";
        // this.$set(this.temp2,'preset_count','255');
      } else {
        this.temp2.preset_count = "1";
        // this.$set(this.temp2,'preset_count','1');
      }
    },
    // 勾选
    isDefault(v) {
      this.$confirm("是否修默认", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // var data={
          //   cameraId: v.cameraId,
          //   cameraPresetId: v.presetNumber
          // }
          var data = new FormData();
          data.append("cameraId", v.cameraId);
          data.append("cameraPresetId", v.presetNumber);
          request({
            url: "/cameraConfiguration/modifyCameraPreset",
            method: "post",
            data,
          }).then((res) => {
            if (res.code == 200) {
              this.getDeviceList(this.nodeItem.id);
              this.$message.success("修改成功");
            }
          });
        })
        .catch(() => {
          v.isDefault = 0;
        });
    },
    exportExcel() {
      var data = new FormData();
      data.append("cameraPId", this.currentRow.id);
      data.append("deviceNos", this.checkedNodes.join(","));
      request({
        url: "/cameraConfiguration/saveCameraPresetDevice",
        method: "post",
        data,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getDeviceList(this.nodeItem.id);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleCurrentChange(val) {
      if (val) {
        this.currentRow = val;
        console.log(val, "val.deviceNo");
        // this.$refs.tree.setCheckedKeys(val.deviceNo);
        // if(val.deviceNo) {
        //   val.deviceNo.map(v => {
        //     this.$refs.tree.setCheckedKeys([v]);
        //   })
        // }
        this.$refs.tree.setCheckedKeys([]);

        var a = this.rightData;
        var d = [];
        var recursiveFunction = function () {
          const getStr = function (list) {
            list.forEach(function (row) {
              if (row.ChildDatas.length != 0) {
                getStr(row.ChildDatas);
              } else {
                row.disabled = false;
                val.deviceNo.map((v) => {
                  if (row.Content.Id == v && row.Content.Category == "Device") {
                    if (!row.Content.UnitId) {
                      d.push(row.numNo);
                    }

                    // this.$refs.treeRef.setCurrentKey(row.Content.Id);
                    //
                  }
                });
              }
            });
          };
          getStr(a);
        };
        recursiveFunction();
        // console.log(d,'ddddddd');
        setTimeout(() => {
          this.$refs.tree.setCheckedKeys(d);
        }, 300);
      } else {
        this.currentRow = {};
      }
    },
    type_fn(val) {
      var data = this.leftDataCopy[0].children.filter(
        (item) => item.appType == val
      );

      if (val == "") {
        this.leftData[0].children = this.leftDataCopy[0].children;
      } else {
        this.leftData[0].children = data;
      }
    },
    forceUpdate() {
      this.$forceUpdate();
    },
    //左边树形结构筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //表格全选反选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //左边树形结构数据
    findUnitInfoFun() {
      var params = {
        unitId: this.unitId.id,
      };
      request({
        url: "/cameraConfiguration/findCameraTree",
        method: "get",
        params,
      }).then((res) => {
        // console.log("左边",res);
        if (res.code == 200) {
          res.data = JSON.parse(
            JSON.stringify(res.data).replace(/unitName/g, "name")
          );

          var list = [res.data];
          list[0].id = list[0].unitId;
          this.leftData = list;
          this.leftDataCopy = JSON.parse(JSON.stringify(list));
          this.defaultDevice = this.unitItem.id;
          this.defaultExpanded.push(this.unitItem.id);
          this.$nextTick(() => {
            //默认选中
            this.$refs["leftTree"].setCurrentKey(this.defaultDevice);
          });
        }
      });
    },
    //左边数据结构点击
    leftTreeClick(item) {
      this.unitItem = item;
      //tag==1 点击了单位，所以是添加能流图
      //tag==2 点击了能流图，所以是添加节点
      //tag==3 点击了能流图的节点，所以是添加节点中的子节点
      this.tag = item.tag;
      this.oldName = item.name;
      if (this.tag == 4) {
        this.nodeItem = item;
        this.getDeviceList(item.id);
      } else {
        this.tableData = [];
      }
    },
    //获取能流图列表
    getDeviceList(ids) {
      var params = {
        cameraId: ids,
      };
      request({
        url: "/cameraConfiguration/findCameraPreset",
        method: "get",
        params,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
        } else {
          this.$message({ type: "warning", message: "获取失败" });
        }
      });
    },
    //弹窗
    popupFn(type) {
      if (this.unitItem.length == 0) {
        this.$message({ type: "warning", message: "请选择节点" });
        return;
      }
      this.flag = true;
      if (type == "add") {
        this.dialogStatus = "新增";
        // this.$set(this.temp,'categoryName','');
        this.temp.categoryName = "";
        this.temp2 = {
          streamType: 0,
          cameraService: 0,
          encoder_type: 0,
          preset_count: 1,
          channel_id: 1,
          remote_port: 8000,
          remote_user: "admin",
          remote_pwd: "admin",
          servicecontrol: 0,
        };
        if (this.tag == 4) {
          this.$message({ type: "warning", message: "视频只能修改" });
          return;
        }
      } else if (type == "eait") {
        if (this.tag == 1 || this.tag == 2) {
          this.$message({ type: "error", message: `只能修改分组和视频` });
          return;
        }
        this.dialogStatus = "修改";
        this.temp.categoryName = this.unitItem.name;
        // this.$set(this.temp,'categoryName',this.unitItem.name);
        this.temp.categoryCode = this.unitItem.camera_code;
        if (this.tag == 4) {
          this.temp2 = Object.assign({}, this.unitItem.cameraInfo);
          // console.log(this.unitItem, "this.unitItem");
          this.flag = false;
        }
      }
      this.$nextTick(() => {
        this.$refs["temp"].clearValidate();
      });
      this.dialogVisible = true;
    },
    //添加成功提示
    addSuccess(type) {
      if (type == "新增") {
        this.$message({ type: "success", message: "添加成功!" });
      } else {
        this.$message({ type: "success", message: "修改成功!" });
      }
      this.findUnitInfoFun();
      this.temp.categoryName = "";
      this.dialogVisible = false;
    },
    //新增修改
    determine_Fn(type) {
      this.$refs["temp"].validate((valid) => {
        if (valid) {
          if (type == "新增") {
            //新增能流图
            if (this.tag == 1 || this.tag == 2) {
              var data = {
                parentId: 2147483647,
                unitId: this.unitItem.id,
                categoryName: this.temp.categoryName,
              };
              request({
                url: "/cameraConfiguration/saveCameraCategory",
                method: "post",
                data,
              }).then((res) => {
                if (res.code == 200) {
                  this.addSuccess(type);
                } else {
                  this.$message({
                    type: "error",
                    message: `新增失败! ${res.message}`,
                  });
                }
              });
            } else if (this.tag === 3) {
              if (this.flag) {
                //添加节点
                var data = {
                  parentId: this.unitItem.id,
                  categoryName: this.temp.categoryName,
                };
                request({
                  url: "/cameraConfiguration/saveCameraCategory",
                  method: "post",
                  data,
                }).then((res) => {
                  if (res.code == 200) {
                    this.addSuccess(type);
                  } else {
                    this.$message({
                      type: "error",
                      message: `新增失败! ${res.message}`,
                    });
                  }
                });
                return;
              }
              //  添加视频
              var data = this.temp2;
              data["cameraCategoryId"] = this.unitItem.id;
              data["play_port"] = 0;

              request({
                url: "/cameraConfiguration/saveCameraInfo",
                method: "post",
                data,
              }).then((res) => {
                if (res.code == 200) {
                  this.addSuccess(type);
                } else {
                  this.$message({
                    type: "error",
                    message: `新增失败! ${res.message}`,
                  });
                }
              });
            } else if (this.tag === 4) {
              var data = this.temp;
              request({
                url: "/cameraConfiguration/saveCameraInfo",
                method: "post",
                data,
              }).then((res) => {
                if (res.code == 200) {
                  this.addSuccess(type);
                } else {
                  this.$message({
                    type: "error",
                    message: `新增失败! ${res.message}`,
                  });
                }
              });
            }
          } else if (type == "修改") {
            if (this.tag === 4) {
              //修改视频
              var data = this.temp2;
              // console.log("data", data);

              data["play_port"] = 0;
              data["ciId"] = this.temp2.id;
              data["cameraCategoryId"] = this.unitItem.id;

              request({
                url: "/cameraConfiguration/saveCameraInfo",
                method: "post",
                data,
              }).then((res) => {
                if (res.code == 200) {
                  this.addSuccess(type);
                  this.unitItem = {};
                } else {
                  this.$message({
                    type: "error",
                    message: `修改失败! ${res.message}`,
                  });
                }
              });

              return;
            }

            var data = {
              ccId: this.unitItem.id,
              categoryCode: this.temp.categoryCode,
              categoryName: this.temp.categoryName,
              parentId: this.unitItem.parentId,
              unitId: this.unitItem.unitId,
            };

            request({
              url: "/cameraConfiguration/saveCameraCategory",
              method: "post",
              data,
            }).then((res) => {
              if (res.code == 200) {
                this.addSuccess(type);
                this.unitItem = {};
              } else {
                this.$message({
                  type: "error",
                  message: `修改失败! ${res.message}`,
                });
              }
            });
          }
        }
      });
    },
    //删除操作
    delFun() {
      if (this.unitItem.length == 0) {
        this.$message({ type: "warning", message: "请选择节点" });
        return;
      }
      if (this.unitItem.children && this.unitItem.children.length) {
        this.$message({ type: "warning", message: "还有子节点不能删除" });
        return;
      }
      if (this.tag == 1 || this.tag == 2) {
        this.$message({ type: "warning", message: "不可删除单位!" });
        return;
      }
      this.$confirm(`是否删除该 ${this.unitItem.name}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.tag == 3) {
            var params = { cameraCategoryId: this.unitItem.id };
            request({
              url: "/cameraConfiguration/deleteCameraCategory",
              method: "delete",
              params,
            }).then((res) => {
              if (res.code == 200) {
                this.findUnitInfoFun();
                this.$message({ type: "success", message: "删除成功!" });
              } else {
                this.$message({
                  type: "error",
                  message: `删除失败! ${res.message}`,
                });
              }
            });
          } else if (this.tag == 4) {
            var params = { cameraInfoId: this.unitItem.id };
            request({
              url: "/cameraConfiguration/deleteCameraInfo",
              method: "delete",
              params,
            }).then((res) => {
              if (res.code == 200) {
                this.findUnitInfoFun();
                this.$message({ type: "success", message: "删除成功!" });
              } else {
                this.$message({
                  type: "error",
                  message: `删除失败! ${res.message}`,
                });
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //树形结构选中节点
    currentChecked(nodeObj, SelectedObj) {
      var checkedNodes = SelectedObj.checkedNodes;
      var checkedNodes = checkedNodes.filter(
        (item) => item.Content.Category == "Device"
      );

      this.checkedNodes = [];
      checkedNodes.map((v) => {
        this.checkedNodes.push(v.Id);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-scrollbar .el-scrollbar__wrap) {
  overflow-x: hidden;
}

:deep(.el-scrollbar__wrap .el-scrollbar__view) {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
}

/* /deep/.el-dialog {
    width: 25% !important;
  } */

.con {
  width: 100%;
  height: 100%;
  display: flex;

  .con-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-left: 10px;
    margin-top: 20px;

    img {
      width: 28px;
      height: 28px;
      margin-right: 10px;
    }
  }

  .tree-left {
    width: 300px;
    height: 100%;
    padding: 12px 12px 12px 12px;
    box-sizing: border-box;
    background-color: #fff;
    margin-right: 8px;
    // background-color: red;
    // text-shadow: 2px 2px 5px red;

    .btns {
      display: flex;
      // justify-content: space-evenly;
      margin-bottom: 10px;

      button {
        margin-right: 12px;
      }

      .el-button--mini {
        padding: 6px 10px !important;
      }

      .el-button + .el-button {
        margin-left: 0px;
      }
    }

    .search {
      margin-bottom: 12px;
    }
  }

  .content {
    /* flex: 1; */
    width: calc(100% - 600px);
    border-right: 1px solid #ccc;
    background-color: #fff;
    padding: 12px 20px 20px 20px;
    box-sizing: border-box;

    .content-title {
      font-size: 16px;
      color: #999;
    }

    .mytable {
      width: 100%;
      height: calc(100% - 20px);
      margin-top: 20px;

      :deep(.el-table th) {
        background-color: #f1f8ff;
      }
    }

    .conten-btns {
      margin-left: 0.3rem;
      margin-top: 200px;

      // button {
      //    margin-bottom: 20px;
      // }
      div {
        width: 0.88rem;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        border-radius: 2px;
        background-color: #409eff;
        color: #fff;
        margin-bottom: 40px;
        cursor: pointer;

        img {
          width: 0.2rem;
          height: 0.2rem;
          margin-left: 0.1rem;
        }
      }
    }
  }

  .tree-right {
    width: 300px;
    height: 100%;
    padding: 12px 12px 12px 12px;
    box-sizing: border-box;
    background-color: #fff;

    .right-tree {
      // margin-top: 20px;
    }

    // background-color: yellow;
  }
}
</style>
